// var websocket = require('socket.io');
function doSomething(){

	/* 为form的各部分注册事件。*/
	var dynamicBar = document.getElementById('dynamicBar');
	var post = document.getElementById('form-textarea');
	var submitButton = document.getElementById('form-submit');
	var userId = document.getElementById('form-id');
	var repeatButton = document.getElementsByClassName('message-repeat');

 	//为输入监听事件，函数的定义在最后。
	post.oninput= dynamicShow;
	userId.oninput = showSubmitButton;
	post.onkeydown = enterToSubmit;
	for(var i = 0; i < repeatButton.length; i++){
			repeatButton[i].onclick = atSomeone;
	}

	dynamicShow();

  //此处根据dom树获取id的方式十分恶心。
	function atSomeone(){
		var messageInfo = this.parentNode;
		var name = messageInfo.firstChild.nextSibling.firstChild.data;
		post.value = '@'+name+' ';
		return false; //这个return false 很关键，否则刷新页面
	}

	function dynamicShow(){
		var userInput = post.value;

		if(userInput != ""){
			dynamicBar.style.visibility = "visible";

			//这一段参与控制发布按钮的显示
			if(userId.value != ""){
				submitButton.disabled = false;
			}else{
				submitButton.disabled = true;
			}

			leftToInput = 140 - userInput.length;
			//限制输入不可多于140字符，若多出，则截取前140个字符。
			if(leftToInput < 0){
				leftToInput = 0;
				post.value = userInput.substr(0,140);
			}

			var num = document.getElementById('num');
			num.innerHTML = leftToInput;
		}else{  //如果没有内容，让它消失。
			dynamicBar.style.visibility = "hidden";
			submitButton.disabled = true;
		}
	}

	function showSubmitButton(){
		var userInput = post.value;
		var id = userId.value;
		if(userInput != "" && id != ""){
			submitButton.disabled = false;
		}else{
			submitButton.disabled = true;
		}
	}

	function enterToSubmit(event){
			if(event.keyCode == 13 && post.value != "" && post.value != "\n"){
				submitForm();
			}
		}

	/*
	*    websocket部分
	*/
	var socket = io.connect();
	var form = document.getElementById('form');

	//当submit按钮杯点击时，emit表达数据到服务器，
	//服务器获得数据并存入数据库，并emit update返回客户端。
	form.onsubmit = submitForm;

	function submitForm(){  //not actually submit
			var name = userId.value;
			var postInfo = post.value;
			socket.emit('newPost',{
				'name': name,
				'post': postInfo
			});
			post.value = null;
			submitButton.disabled = true;
			return false;  //由于这一句话，已经没有post请求了
	}
	//当客户端接收到服务器发来的update事件时，更新页面。
	socket.on('update',function(data){

		var name = data.name;
		var time = data.time;
		var post = data.post;

		createANewMessage(name, time, post);
		newMessages.stop();
		newMessages.show();
	});

		// 首先创建一个className为message的div,
		// 根据name、time、post设置其innerHTML,
		// 并insertBefore到all-message这个div中,另外还要插入一条水平分割线
	function createANewMessage(name, time, post){
		allMessages_div = document.getElementById('all-messages');
		messages_div = document.getElementsByClassName('message');

	 	var newMessage = document.createElement("div");
		newMessage.className = "message";
		newMessage.innerHTML = "<img class='head_portrait' src='/images/头像.png'>"+
		"<div class='message-info'>"+
		"	<p class='message-id'>" + name +  "</p>"+
		"	<p class='message-detail'>" + post + "</p>"+
		"	<time>" + time + "</time>"+
		"<p class ='message-repeat' ><a href=''>回复</a></p>"+
		"</div>";

		var hr = document.createElement('hr');
		hr.className = "messages_divider";
		allMessages_div.insertBefore(hr, messages_div[0]);
		allMessages_div.insertBefore(newMessage, hr);
		var repeatButton = document.getElementsByClassName('message-repeat');
		repeatButton[0].onclick = atSomeone;

	}


  /*其他*/
	//摘自网络，新消息来临时标题闪烁。
	var newMessages = function(){
		var i = 0;
		var title = document.title;
		var loop;
		return {
			show: function(){
				loop = setInterval(function(){
					i++;
					if(i == 1) document.title =  title + '【New】';
					if(i == 2) document.title =  title ;
					if(i == 3) i = 0;
				},800);
			},
			stop: function() {
				clearInterval(loop);
				document.title = title;
			}
		};
	} ();
	post.onfocus = function(){
		newMessages.stop();
	}




}
doSomething();
